<template>
  <el-card class="list-page">
    <div class="list-h">
      <el-button
        type="primary"
        @click="handleAdd"
        v-auth="`/approval/todo--add`"
        >我要发起</el-button
      >
      <el-form
        :inline="true"
        class="demo-form-inline"
        :model="formSearch"
        ref="formRef"
        @submit.prevent
      >
        <el-form-item label="单据名称" prop="billName">
          <el-input
            clearable
            class="width-custom120"
            v-model="formSearch.billName"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属项目" prop="projectName">
          <el-input
            clearable
            class="width-custom120"
            v-model="formSearch.projectName"
          ></el-input>
        </el-form-item>
        <el-form-item label="所属阶段" prop="projectStage">
          <el-select
            v-model="formSearch.projectStage"
            clearable
            class="width-custom120"
          >
            <el-option>全部</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="单据类型" prop="billType">
          <el-select
            v-model="formSearch.billType"
            clearable
            class="width-custom120"
          >
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="单据状态" prop="billState">
          <el-select
            v-model="formSearch.billState"
            clearable
            class="width-custom120"
          >
            <el-option>全部</el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button @click="handleReset">重置</el-button>
          <ReButton
            type="primary"
            debounce
            auto-loading
            @click="handleMainSearch"
            >查询</ReButton
          >
        </el-form-item>
      </el-form>
    </div>
    <el-skeleton style="height: 50vh" :rows="8" :loading="loading" animated>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="{
          background: '#F7F9FD',
          color: '#000',
          height: '48px',
          borderTop: '1px soild #E4E8F2'
        }"
      >
        <template #empty>
          <el-empty :image-size="150" description="暂无数据"></el-empty>
        </template>
        <el-table-column type="index" label="序号" width="50">
          <template v-slot="scope">
            <span>{{
              (formInline.pageNum - 1) * formInline.pageSize + scope.$index + 1
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="billName" label="单据名称"> </el-table-column>
        <el-table-column prop="projectName" label="所属项目"> </el-table-column>
        <el-table-column label="所属阶段">
          <template #default="{ row }">
            <span class="text--info">
              {{ row.projectStageName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="billType" label="单据类型">
          <template #default="{ row }">
            {{ formatterStatusType(row) }}
          </template>
        </el-table-column>
        <el-table-column prop="createUser" label="提交人"> </el-table-column>
        <el-table-column prop="nodeStartTime" label="到达时间" width="160">
        </el-table-column>
        <el-table-column label="当前环节">
          <template #default="{ row }">
            <span class="text--info">
              {{ row.nodeStatusName }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="当前处理人">
          <template #default="{ row }">
            <span class="text--info">
              {{ row.curHandleUserName }}
            </span>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="flowType" label="单据状态"></el-table-column> -->
        <el-table-column fixed="right" label="操作" width="80">
          <template #default="{ row }">
            <el-button
              type="text"
              size="small"
              @click="handleDetail(row)"
              v-auth="`/approval/todo--edit`"
              >处理</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <re-pagination
        v-if="total > 0"
        :total="total"
        v-model:page="formInline.pageNum"
        v-model:limit="formInline.pageSize"
        @pagination="handleSearch"
      />
    </el-skeleton>
  </el-card>
</template>

<script lang="ts">
import { reactive, ref, defineComponent } from "vue";
import { BillStatusEnum, BillStatusMap } from "../types";
import ReButton from "/@/components/ReButton/index.vue";
import { useRouter } from "vue-router";
import { postBills } from "/@/api/work";
import RePagination from "/@/components/RePagination/index.vue";

export default defineComponent({
  components: { ReButton, RePagination },
  setup() {
    const formRef = ref<HTMLFormElement | null>(null) as any;
    let formSearch = reactive({
      billName: "",
      projectName: "",
      projectStage: "",
      billType: "",
      billState: ""
    });
    const router = useRouter();
    let loading = ref<boolean>(false);
    let tableData = ref([]);
    let total = ref<number>(0);
    let formInline = reactive({
      pageNum: 1,
      pageSize: 10,
      flowStatus: "5"
    });

    const typeList = BillStatusEnum;

    const getTableData = async (obj: Object = {}) => {
      const { code, data } = await postBills(Object.assign(formSearch, obj));

      if (code === 200) {
        tableData.value = data.list;
        total.value = data.rows;
      }
    };

    getTableData(formInline);

    const handleReset = (): void => {
      formRef.value.resetFields();
    };

    const handleSearch = () => {
      getTableData(formInline);
    };

    const handleMainSearch = done => {
      handleSearch();
      setTimeout(() => {
        done();
      }, 1000);
    };

    const handleDetail = row => {
      const {
        contractId,
        nodeId,
        instanceId,
        flowId,
        preNodeId,
        billType,
        flowBaseId
      } = row;
      let pathUrl = "/projectsA/acceptance/arrival/detail";
      let pathQuery = {
        mode: "read",
        contractId,
        nodeDefId: instanceId ? nodeId.toUpperCase() : "ACT_010",
        instanceId,
        flowId,
        source: "work",
        preNodeId
      };

      if (billType && ["5", "6"].includes(billType)) {
        pathUrl = "/projectsA/acceptance/concealed/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: billType,
          contractId: flowBaseId
        });
      } else if (billType && ["7", "8"].includes(billType)) {
        pathUrl = "/projectsA/acceptance/completed/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: billType,
          contractId: flowBaseId
        });
      } else if (billType && ["9", "10"].includes(billType)) {
        pathUrl = "/projectsA/acceptance/material/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: billType,
          contractId: flowBaseId
        });
      } else if (billType && ["11", "15"].includes(billType)) {
        pathUrl = "/projectsA/quality/inspection/detail";
        pathQuery = Object.assign(pathQuery, {
          flowMinType: billType,
          contractId: flowBaseId
        });
      } else if (billType &&["1001", "1002", "1003", "1004"].includes(billType)) {
        pathUrl = "/approval/detail";
        pathQuery = Object.assign(pathQuery, {
          mode: "add",
          taskId: row.taskId,
          contractId: flowBaseId,
          flowType: row.billType
        });
      } else if (billType &&["1015"].includes(billType)) {
        pathUrl = "/projectsS/construction/quality/detail";
        pathQuery = Object.assign(pathQuery, {
          mode: "add",
          taskId: row.taskId,
          contractId: flowBaseId,
          flowType: row.billType
        });
      }
      router.replace({
        path: pathUrl,
        query: pathQuery
      });
    };

    // 格式化类型
    const formatterStatusType = row => {
      return row?.billType && BillStatusMap.get(row.billType);
    };

    return {
      formRef,
      formSearch,
      typeList,
      loading,
      formInline,
      total,
      tableData,
      handleReset,
      handleSearch,
      handleMainSearch,
      handleDetail,
      formatterStatusType
    };
  }
});
</script>

<style lang="scss" scoped></style>
